<template>
	<div class="feed-container">
		<nav-bar title="消息提醒" :custom-back="true" @on-back="handleBack" />
		<!-- 顶部筛选栏 -->
		<div class="apply-top flex jB">
			<van-dropdown-menu active-color="#1768EF" >
				<van-dropdown-item v-model="value1" :options="option1" :title="title1" @change="change1"  />
			</van-dropdown-menu>
			<van-button size="small" plain type="primary" class="mini-btn" @click="handleAllRead">全部已读</van-button>
		</div>

		<!-- 消息列表 -->
		<div class="list-container">
			<div v-for="(item, index) in list" :key="index" class="flex-row" @click="isReadTap(item, index)">
				<div class="flex jB mB20" style="    display: flex; width: 100%;justify-content: space-between;">
					<div >
						<span>【{{ item.params.notificationBarTitle }}】</span>
						<van-tag v-if="item.isRead === 'NO'" type="warning" plain class="tag">未读</van-tag>
					
					</div>
					<span class="text_8">{{ item.createTime.substr(0, 10) }}</span>
				</div>
				<div class="f25">
					{{ item.params.notificationBarContent }}
				</div>
			</div>

			<!-- 加载状态 -->
			<van-loading v-if="isLoading" />

			<!-- 空状态 -->
			<van-empty v-if="total === 0" description="暂无数据" />

			<!-- 底部提示 -->
			<div v-if="total > 8 && list.length === total" class="bottom-tip">到底了~</div>
		</div>

		<!-- 回到顶部 -->

		<!-- <div class="el-backtop" style="right: 20px; bottom: 20px;" @click="handleToTop"><iclass="el-icon-caret-top"></i></div> -->
	</div>
</template>

<script>
	import NavBar from '@/components/NavBar'
	import {
		doReadMessage,
		getStatus,
		listMessageByUser,
		doReadAllMessage
	} from "@/api/message.js"
	import {
		Toast
	} from 'vant';

	export default {
		name: 'MessageList',
		components: {
			NavBar
		},
		data() {
			return {
				list: [],
				isLoading: true,
				total: null,
				hasNextPage: true,
				showTop: true,
				title1: '状态',
				value1: '',
				option1: [{
						text: '全部',
						value: ''
					},
					{
						text: '已读',
						value: 'YES'
					},
					{
						text: '未读',
						value: 'NO'
					}
				],
				pageNum: 1,
				user: [],
				businessId: '',
				businessType: '',
				taskId: '',
				 pageUrl : [{
						businessType: 't_purchase_apply',
						//食堂采购
						path: 'canteenPurchaseDetail'
					},
					{
						businessType: 't_office_supplies_apply_record_purchase',
						//物品进货
						path: 'purchaseControlDetail'
					},
					{
						businessType: 't_office_supplies_apply_record',
						//物品领用
						path: 'goodsRequisitionDetail'
					},
					{
						businessType: 't_vehicle_apply',
						//用车申请
						path: 'carApprovalDetail'
					},
					{
						businessType: 't_vehicle_excep_apply',
						//延时用车申请
						path: 'carDelayDetail'
					},
					{
						businessType: 't_vehicle_excep_apply',
						//延时用车申请
						path: 'carApprovalDetail'
					},
					{
						businessType: 't_vehicle_maintenance',
						//车辆维保
						path: 'carManagement/carMaintenanceDetail'
					},
					{
						businessType: 't_vehicle_attendance_leave',
						//司机请假
						path: 'driverManagement/driverLeaveDetail'
					},
					{
						businessType: 't_notice_apply',
						//通知公告
						path: 'annunciateDetail'
					}
				],
			}
		},


		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.getMessageList()
		},

		methods: {
			handleBack(){
				this.$router.push('/home')
			},
			
			// 获取消息列表
			getMessageList() {
				try {
					listMessageByUser({
							openSessionId: this.user.openSessionId,
							pageNum: this.pageNum,
							pageSize: 8,
							type: 'PC',
							isRead: this.value1
						})
						.then(res => {
							if (res.code === 200) {
								this.list = res.data.rows
								this.total = res.total
								this.hasNextPage = res.pageNum < res.totalPage
							}
						})
				} catch (err) {
					Toast.fail('获取数据失败')
				} finally {
					this.isLoading = false
				}
			},

			// 标记已读
			markAsRead(id, index) {
				try {
					doReadMessage({
							openSessionId: this.user.openSessionId,
							pageNum: this.pageNum,
							pageSize: 8,
							type: 'PC',
							isRead: this.value1
						})
						.then(res => {
							if (res.code === 200) {
								Toast.success('标记成功')
								this.$set(this.list[index], 'isRead', 'YES')
							}
						})
				} catch (err) {
					Toast.fail('操作失败')
				}
			},

			// 全部已读
			handleAllRead() {
				try {

					doReadAllMessage({
							openSessionId: this.user.openSessionId,
						})
						.then(res => {
							if (res.code == 200) {
								Toast.success('已读成功');
								this.pageNum = 1;
								this.list = []
								this.getMessageList();
							}
						})
				} catch (err) {
					Toast.fail('操作失败')
				}
			},

			// 筛选变化
			change1(value) {
				const option = this.option1.find(item => item.value === value)
				this.title1 = option.text
				this.value1 = option.value
				this.list = []
				this.pageNum = 1
				this.getMessageList()
			},

			// 处理消息点击
			async isReadTap(item, index) {
				const {
					messageId,
					isRead,
					linkUrl
				} = item

				// 标记已读
				if (isRead === 'NO') {
					await this.markAsRead(messageId, index)
				}

				// 处理跳转
				if (linkUrl) {
					await this.handleMessageJump(linkUrl)
				}
			},

			// 处理消息跳转
			handleMessageJump(linkUrl) {
				const urlParts = linkUrl.split(',')
const that =this;
				if (urlParts.length < 2) return

				this.businessId = urlParts[0]
				this.businessType = urlParts[urlParts.length === 2 ? 1 : 2]
				this.taskId = urlParts.length > 2 ? urlParts[1] : ''

				try {

					getStatus({
						openSessionId: this.user.openSessionId,
						businessId: this.businessId,
						taskId: this.taskId,
						businessType: this.businessType
					}).then(res => {
						if (res.code === 200) {
							const data = res.data

							if (!data) {
								Toast('该审批已删除')
								return
							}

							if (data.state === 9 || data.status === 9) {
								Toast('该审批已撤回')
								return
							}

							// 跳转到对应页面
							// const pageUrl = that.getPageUrl(this.businessType)
							
							const pageUrl = this.pageUrl.find((item) => item.businessType == this.businessType).path;
							
							const state = data.status
							const params = this.taskId ?
								`id=${this.businessId}&entrance=2&state=${state}&taskId=${this.taskId}&type=${this.businessType}` :
								`id=${this.businessId}&entrance=1&type=${this.businessType}`

							this.$router.push(`/${pageUrl}?${params}`)
						}
					})

				} catch (err) {
					Toast.fail('获取状态失败')
				}
			}
		},
		// 回到顶部方法
		handleToTop() {
			const scrollEle = document.querySelector('.app-main') /* // .app-main是盒子的最高父级 */
			scrollEle.scrollTo({
				top: 0,
				behavior: 'smooth'
			});
		},
		
	}
</script>

<style lang="scss" scoped>
	.feed-container {
		padding: 10px 0;
		background-color: #f5f5f5;
		min-height: 100vh;

		.apply-top {
			margin: 44px 0 10px;
			height: 40px;
			padding: 0 10px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;


			.mini-btn {
				height: 24px;
				line-height: 23px;
				font-size: 12px;
				background: #fff;
				border: 1px solid #2979ff;
				color: #2979ff;
			}
		}

		.list-wrapper {
			padding: 0 10px;
		}

		.flex-row {
			margin: 10px 0;
			background: white;
			border-radius: 5px;
			border: 1px solid #ddd;
			padding: 12.5px 7.5px;
			text-align: left;

			.status-tag {
				margin-right: 5px;
				margin-top: 3px;
				border-radius: 12px;
				width: 40px;
				height: 18px !important;
				line-height: 18px !important;
				font-size: 12px;
			}

			.text_8 {
				width: 100px;
				text-align: right;
				color: #999;
				font-size: 14px;
			}

			.content-text {
				font-size: 12.5px;
				padding-left: 5px;
			}
		}
	}
	.floatBtn image {
	    height: 160rpx;
	    width: 160rpx;
	}
	
	.f25 {
	    font-size: 25rpx;
	    padding-left: 10rpx;
	}

	// 覆盖 Vant 样式
	 :deep(.van-dropdown-menu){
	}
	:deep(.van-dropdown-menu__bar){
		height: 30px !important;
		width: 90px !important;
		box-shadow: none !important;
	}
</style>